<template>
  <!-- <div class="register-container"> -->
  <div class="register-container">
    <div class="register-content">
      <el-form class="register-form">

        <h1 class="title">用户注册</h1>

        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" autocomplete="off"
          :hide-required-asterisk="true" size="medium" class="form">


          <el-form-item label="" prop="nickname">
            <el-col :span="18">
              <el-input v-model="ruleForm.nickname" placeholder="请输入用户名" />
            </el-col>
          </el-form-item>


          <el-form-item label="" prop="pwd">
            <el-col :span="18">
              <el-input v-model="ruleForm.pwd" placeholder="用户密码" type="password" />
            </el-col>
          </el-form-item>

          <el-form-item label="" prop="cpwd">
            <el-col :span="18">
              <el-input v-model="ruleForm.cpwd" placeholder="确认密码" type="password" />
            </el-col>
          </el-form-item>


          <el-form-item label="" prop="email">

            <el-col :span="17">
              <!-- <el-input v-model="hyx.email" placeholder="请输入您的邮箱" /> -->
              <el-input v-model="ruleForm.email" placeholder="请输入您的邮箱" />
            </el-col>
            <el-col :span="7">
              <el-button type="primary"
                style="width:120%; margin-left: 4px;background-color:transparent; border-color:white; color: white;"
                @click="sendmail">
                点击发送
              </el-button>
            </el-col>
          </el-form-item>


          <el-form-item label="" prop="emailcode">
            <el-col :span="18">
              <el-input v-model="ruleForm.emailcode" maxlength="6" placeholder="请输入收到的验证码" />
            </el-col>
          </el-form-item>
          <!-- 电话号组件 -->
          <el-form-item label="" prop="phonenumber">
            <el-col :span="18">
              <el-input v-model="ruleForm.phonenumber" maxlength="11" placeholder="请输入您的手机号码" />
            </el-col>
          </el-form-item>
          <!-- 角色组件 -->
          <!-- <el-form-item label="" prop="role">
            <el-col :span="18">
              <el-input v-model="ruleForm.role" maxlength="1" placeholder="请输入您的角色选择" />
            </el-col>
          </el-form-item> -->


          <el-form-item label="" prop="code">
            <el-col :span="18">
              <el-input v-model="ruleForm.code" maxlength="4" placeholder="请输入验证码" />
            </el-col>
            <el-col :span="5">
              <div class="login-code" width="100%" @click="refreshCode">
                <!-- 验证码组件 -->
                <s-identify :identifyCode="identifyCode" style="margin-top: 0px ;margin-left: 4px"></s-identify>
              </div>
            </el-col>
          </el-form-item>
          <el-form-item style="margin-left: 50px">
            <el-button type="primary"
              style="width:50%; margin-left: -50px;background-color:transparent; border-color:white; color: white;"
              @click="register">
              注册
            </el-button>

            <!-- <el-form-item> -->

            <el-button type="primary"
              style="width:50%; margin-left: 10px;background-color:transparent; border-color:white; color:white;"
              @click.native="logout">返回登录</el-button>
          </el-form-item>
          <!-- </el-form-item> -->
        </el-form>
      </el-form>
    </div>

    <!-- <div class="videoContainer">

      <video :style="fixStyle" class="fillWidth" playsinline="" autoplay="" muted="" loop="" v-on:canplay="canplay">
        <source src="@/assets/images/register/background.mp4" type="video/mp4" />
      </video>
    </div> -->

  </div>
</template>
    
<script>
import Vue from 'vue'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
import SIdentify from './verify.vue';
import { register } from '@/api/register'
import { send } from '@/api/form'
import { config } from '@vue/test-utils';
// import { encrypt } from '@/utils/rsaEncrypt'
// import identify from '@/views/verifyCode/index.vue'
export default {
  name: 'register',
  components: { SIdentify },
  data() {
    return {
      statusMsg: '',
      error: '',
      isDisable: false,
      codeLoading: false,

      //后端邮箱发送的内容
      reponsecode: '',
      ruleForm: {
        username: '',
        pwd: '',
        cpwd: '',
        email: '',
        emailcode: '',
        code: '',
        phonenumber: '',
        role: '1'

      },

      identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',//随机串内容
      identifyCode: '',

      rules: {

        nickname: [{
          required: true,
          type: 'string',
          message: '请输入用户名',
          trigger: 'blur'
        }],

        pwd: [{
          required: true,
          message: '输入密码',
          trigger: 'blur'
        }, { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/, message: '密码必须同时包含数字与字母,且长度为 6-20位' }],
        cpwd: [{
          required: true,
          message: '确认密码',
          trigger: 'blur'
        }, {
          validator: (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'))
            } else if (value !== this.ruleForm.pwd) {
              callback(new Error('两次输入密码不一致'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }],
        email: [{
          required: true,
          type: 'email',
          message: '请输入邮箱',
          trigger: 'blur'
        }],

        emailcode: [{
          required: true,
          type: 'string',
          message: '请输入收到的验证码',
          trigger: 'blur'
        }],
        code: [{
          required: true,
          type: 'string',
          message: '请输入验证码',
          trigger: 'blur'
        }],
        phonenumber: [{
          required: true,
          type: 'string',
          message: '请输入电话号码',
          trigger: 'blur'
        }],
        role: [{
          required: true,
          type: 'string',
          message: '请输入角色号码',
          trigger: 'blur'
        }]

      },
    }
  },

  mounted() {
    // 初始化验证码
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
    this.fetchData();
  },

  methods: {


    canplay() {
      this.vedioCanPlay = true
    },
    //监听屏幕大小实时给播放器设置宽高
    getVideoStyle() {
      window.onresize = () => {
        const windowWidth = document.body.clientWidth
        const windowHeight = document.body.clientHeight
        const windowAspectRatio = windowHeight / windowWidth
        console.log(windowWidth, windowHeight, windowAspectRatio, '屏幕实时大小')
        let videoWidth
        let videoHeight
        if (windowAspectRatio < 0.5625) {
          videoWidth = windowWidth
          videoHeight = videoWidth * 0.5625
          this.fixStyle = {
            height: windowWidth * 0.5625 + 'px',
            width: windowWidth + 'px',
            'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
            'margin-left': 'initial'
          }
        } else {
          videoHeight = windowHeight
          videoWidth = videoHeight / 0.5625
          this.fixStyle = {
            height: windowHeight + 'px',
            width: windowHeight / 0.5625 + 'px',
            'margin-left': (windowWidth - videoWidth) / 2 + 'px',
            'margin-bottom': 'initial'
          }
        }
      }
      window.onresize()
    },

    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    // 重置验证码
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
      }
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    //发送验证码

    //     fetchData() {
    //     axios.get('/mail/send') // 替换为你的后端接口地址
    //     .then(response => {
    //       this.responseData = response.data;
    //     })
    //     .catch(error => {
    //       console.error(error);
    //     });
    //   },








    //将收件人的邮箱发送到后端
    // send() {
    //   console.log("确认发送");
    //   this.axios
    //     .get("/mail/send/", {
    //       params: { receiver: this.receiver },
    //     })
    //     .then(() => {
    //       console.log("成功");
    //     })
    //     .catch((error) => {
    //       console.log(error);
    //     });
    // },
    // testReg() {
    // //   const reg = new RegExp(
    // //     "^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$"
    // //   );
    // //   console.log(reg);
    //   if (reg.test(this.receiver)) {
    //     this.send(); //对接后端的函数
    //     alert("发送成功");
    //   } else {
    //     alert("邮箱格式不正确");
    //   }
    // },


    sendmail() {
      // console.log(this.form.xihuan)
      // console.log(this.form.user_name)
      send({ "email": this.ruleForm.email }).then(response => {
        // 处理成功的响应
        this.$message('email sent successfully!')
        this.reponsecode = response.data
        // config.log(this.reponsecode)
      }).catch(error => {
        // 处理错误的响应
        this.$message.error('Failed to send mail')
      })
    },

    // 用户注册
    register: function () {

      // 验证码验证
      if (this.ruleForm.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
        this.$message.error('请填写正确验证码')
        this.refreshCode()
        return
      }

      // //邮箱验证码匹配
      if (this.ruleForm.emailcode !== this.reponsecode) {
        // config.log(this.ruleForm.emailcode)
        this.$message.error('请填写邮箱收到的验证码')
        return
      }

      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let aData = new Date();
          var month = 1 + aData.getMonth();
          if (month.toString().length == 1) {
            month = "0" + month;
          }
          console.log(month);
          const user = {
            username: this.ruleForm.nickname,
            password: this.ruleForm.pwd,
            email: this.ruleForm.email,
            phone: this.ruleForm.phonenumber,
            // role: this.ruleForm.role,
            role: '1'
            // regtime: aData.getFullYear() + "-" + month + "-" + aData.getDate() + " " + aData.getHours() + ":" + aData.getMinutes() + ":" + aData.getSeconds()
          }
          register(user).then(res => {
            console.log(res)
            this.$message({
              showClose: true,
              message: '注册成功，正在跳转到登录界面...',
              type: 'success'
            })
            setTimeout(() => {
              this.$router.push('/')
            }, 2000)
          }).catch(err => {
            this.$message.error(err.response.data.message)
            console.log(err.response.data.message)
          })
        }
      })
    },

    videoCut() {

      $('video').on('loadedmetadata', function (event) {

        var duration = Math.ceil(this.duration)

        this.currentTime = Math.round(Math.random() * duration)

      })
    }
  }

}
</script>
    
<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
//$light_gray: #006400;
$light_gray: white;
$cursor: #fff;


@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .register-container .el-input input {
    color: $cursor;
  }
}



/* reset element-ui css */
.register-container {
  background-image: url(../../assets/background/202307160003161.jpg);
  background-size: cover;
  background-attachment: scroll;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .register-form {

    //width: 50%;
    // height: 50%;
    // border-radius: 10px;
    // //here
    // //  display: flex;
    // //here
    // //display: center;
    // // justify-content: center;
    // // align-items: center;
    // font-size: 20px;
    // align-content: center;
    // // letter-spacing: 0.5em;
    // //透明
    // background-color: rgba(255, 255, 255, 0.7);
    // position: relative;
    // width: 520px;
    // max-width: 100%;
    // // padding: 160px 35px 0;
    // padding: 15px 35px 15px;
    // margin: 0 auto;
    // overflow: hidden;
    width: 640px;
    height: 780px;
    z-index: 2;
    left: 600px;
    top: 230px;
    border-width: 0px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    border-radius: 2px;
    border: none;
    box-shadow: none;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .el-input {
    display: inline-block;
    height: 47px;
    width: 95%;

    input::placeholder {
      // color: #BC8F8F;
      color: white;
    }

    input {
      background: rgba(0, 0, 0, 0.4);

      border-radius: 5px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      -webkit-appearance: none;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    label {
      font-style: normal;
      font-size: 12px;
      color: $light_gray;
      ;
    }
  }

}

.videoContainer {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -100;
}

.videoContainer:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  top: 0;
  left: 0;
  background: rgba(25, 29, 34, 0.65);
}

//   .fillWidth {
//     width: 100%;
//    // height:100%;
//   }
</style>
    